<template>
  <div>
    <div class="item-info">
      <div
        :class="['single-item', item.flag ? 'active-item' : '']"
        v-for="(item, index) in singleItemList"
        :key="index"
      >
        <div>{{ item.name }}</div>
        <div class="item-logo">
          <img :src="item.logo" alt="" />
        </div>
      </div>
      <div class="single-item-info">
        <div class="info-line1">
          <div>{{ gameTitle }}</div>
          <div class="venue">{{ venueName }}</div>
        </div>
        <div class="info-line2">
          <div class="report-name">{{ sportFileName }}</div>
          <div>{{ gameTime }}</div>
        </div>
      </div>
    </div>
    <div class="rank-table-data">
      <el-table :data="rankData" style="width: 100%" stripe>
        <template v-for="(item, index) in tableHeader">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :align="item.align"
            :header-align="item['header-align']"
            v-if="
              (sportFileName === '获奖名单' && item.label !== '名次') ||
                sportFileName === '名次公告'
            "
          >
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  created() {
    this.venueName = this.$route.query.venueName
    this.gameTime = this.$route.query.gameTime
    this.gameTitle = this.$route.query.gameTitle
    this.SportItemCode = this.$route.query.SportItemCode
    this.sportFileName = this.$route.query.sportFileName
    this.getRankData()
  },
  props: {},
  data() {
    return {
      sportFileName: '名次公告',
      SportItemCode: '',
      venueName: '',
      gameTime: '',
      gameTitle: '',
      tableHeader: [
        { prop: 'F_Rank', label: '名次', align: 'center', 'header-align': 'center' },
        { prop: 'DelegationName', label: '单位' },
        { prop: 'AthleteName', label: '运动员' },
        { prop: 'F_Description', label: '备注', align: 'center', 'header-align': 'center' }
      ],
      tableData: [
        {
          AthleteList: [
            { F_Name: '吴邦昊', F_Code: 'GO0000135' },
            { F_Name: '吴邦昊', F_Code: 'GO0000135' }
          ],
          AthleteName: '',
          DelegationCode: 'D017',
          DelegationName: '湖北',
          EventCode: 'DRM003',
          EventName: '64格男子个人',
          F_Date: '2019-11-18T11:00:00',
          F_Description: '',
          F_Name: '刘金鑫',
          F_Rank: 1
        }
      ],
      singleItemList: [
        {
          name: '国际象棋',
          logo: require('../../assets/img/daily/CH.png'),
          flag: true
        }
      ]
    }
  },
  watch: {},
  computed: {
    ...mapState({
      rankData: state => state.schedule.rankData
    })
  },
  filters: {},
  components: {},
  methods: {
    getRankData() {
      this.$store
        .dispatch('getRankData', this.SportItemCode + '/Data.json')
        .then(_ => {
          console.log(this.rankData)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/item.scss';
</style>
